import React, { useState, useEffect } from 'react'
import { connect } from "react-redux";
import { Button } from 'antd';
import ContextMenu from './ContextMenu';
import Grid from './Grid';
import Shape from './Shape';
import MarkLine from './MarkLine';
import { setCurrComp, setComponent, setIsClickComponent, setMenuShow, setMenuStyle, setMarklineFlag } from '@/store/actions/visualdrag';

const Pages = ({ canvasStyleData, curComponent, curComponentIndex, componentData, menuShow, marklineFlag, dispatch }) => {
  const handleMouseDown = (e, item) => {
    e.stopPropagation()
    let data = {
      index: item.id,
      component: item
    };
    dispatch(setCurrComp(data));
    dispatch(setIsClickComponent(true));
    const pos = item.style;
    const startY = e.clientY
    const startX = e.clientX
    // 如果直接修改属性，值的类型会变为字符串，所以要转为数值型
    const startTop = Number(pos.top)
    const startLeft = Number(pos.left)
    const move = (moveEvent) => {
      const currX = moveEvent.clientX
      const currY = moveEvent.clientY
      let top = currY - startY + startTop
      let left = currX - startX + startLeft
      let curCompIndex = item.id;
      let index = 0;
      // 修改当前组件样式
      componentData.map((mm, idx) => {
        if (mm.id == curCompIndex) {
          index = idx;
          mm.style.top = top;
          mm.style.left = left;
        }
      })
      // 选中组件层级置为最高
      const temp = componentData[index]
      componentData[index] = componentData[componentData.length - 1]
      componentData[componentData.length - 1] = temp

      let data = [...componentData];
      dispatch(setComponent(data))
      dispatch(setMarklineFlag({
        index:currX+currY,
        data:{
          isDownward: currY - startY > 0,
          isRightward: currX - startX > 0,
        }
      }))
    }

    const up = () => {
      dispatch(setMenuShow(false));
      dispatch(setMarklineFlag({
        index:0,
        data:{
          isDownward: false,
          isRightward:false,
        }
      }))
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseup', up)
    }

    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup', up)
  }

  // 处理组件右键点击事件
  const handleContextMenu = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // 计算菜单相对于编辑器的位移
    let target = e.nativeEvent.target;
    let top = e.nativeEvent.offsetY;
    let left = e.nativeEvent.offsetX;
    while (target instanceof SVGElement) {
      target = target.parentNode
    }
    while (!target.className.includes('editor')) {
      left += target.offsetLeft
      top += target.offsetTop
      target = target.parentNode
    }
    if (curComponent) {
      dispatch(setMenuShow(true));
      dispatch(setMenuStyle({
        top,
        left,
        zIndex: 9999
      }))
    }
  }

  return (
    <div className="canvas-box editor"
      id="editor"
      style={{
        width: canvasStyleData.width + 'px',
        height: canvasStyleData.height + 'px'
      }}
      onContextMenu={(e) => handleContextMenu(e)}
    >
      {/* 网格 */}
      <Grid />

      {/* 标线 */}
      <MarkLine componentData={componentData}
        marklineFlag={marklineFlag}
        dispatch={dispatch}
        curComponentIndex={curComponentIndex}
        curComponent={curComponent} />

      {/* 右键菜单 */}
      { menuShow && <ContextMenu />}

      {componentData.map((item, idx) => {
        return (
          <div key={idx}
            onMouseDown={(e) => handleMouseDown(e, item)}
            id={`component${item.id}`}
            style={{ ...item.style, zIndex: idx, transform: `rotate(${item.style.rotate}deg)` }}
            className="canvas-comp-wrap">
            <Shape data={item}
              dispatch={dispatch}
              componentData={componentData}
              curComponent={curComponent}
              curComponentIndex={curComponentIndex} />
          </div>
        )
      })}
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    ...state.VisualDrag
  };
};

export default connect(mapStateToProps)(Pages);